/*
 * @Author: KAZU kazu_zhang@163.com
 * @Date: 2023-02-14 22:11:46
 * @LastEditors: KAZU kazu_zhang@163.com
 * @LastEditTime: 2023-02-16 00:05:45
 * @FilePath: \blog-front-frontend\src\components\testimonial\Testimonial.jsx
 * @Description: 这里是留言板信息
 */
import React from "react";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function Testimonial() {
  var settings = {
    // dots: true,
    arrow: false,
    infinite: true,
    speed: 500,
    // slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: false,
    responsive: [
      {
        breakpoint: 575,
        settings: {
          arrow: false,
          slidesToShow: 1,
          speed: 300,
        },
      },
    ],
  };

  const testimonialContent = [
    {
      id: 1,
      desc: `网站很好看`,
      avatar: "想调用个接口可生成随机头像",
      nickname: "张三",
      designation: "学生"
    },
    {
      id: 2,
      desc: `网站很好看`,
      avatar: "想调用个接口可生成随机头像",
      nickname: "张三",
      designation: "学生"
    },
    {
      id: 3,
      desc: `网站很好看`,
      avatar: "想调用个接口可生成随机头像",
      nickname: "张三",
      designation: "学生"
    },
  ];

  return (
    <div {...settings}>
      {testimonialContent.map(item => (
        <div
          className="list_inner"
          key={item.id}
          data-aos="fade-right"
          data-aos-duration="1200"
        >
          <div className="in">
            <div className="text">
              <p>{item.desc}</p>
            </div>
            {/* End .text */}

            <div className="details">
              <div className="left">
                <div className="avatar">
                  <div
                    className="main"
                    style={{
                      backgroundImage: `url(${process.env.PUBLIC_URL +
                        `img/testimonials/${item.avatar}.jpg`
                        })`,
                    }}
                  ></div>
                </div>
                <div className="info">
                  <h3>{item.nickname}</h3>
                  <span>{item.designation}</span>
                </div>
              </div>
              {/* End .left */}

              <div className="right">
                <span className="icon-left-quote svg"></span>
              </div>
            </div>
            {/* End .details */}
          </div>
        </div>
      ))}
    </div>
  );
}
